<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">

    <!-- 此处设置对移动端页面开发很重要，该设置确保页面与设备相适应 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link type="text/css" rel="stylesheet" href="resources/css/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="resources/css/font-awesome.min.css">


    <title>Insert title here</title>



    <style type="text/css">
        html {
            height: 100%;
            /* 高度填充整个窗口 */
        }

        body {
            height: 100%;
            /* 高度填充整个html */
            padding: 0;
            /* 内边距为0 */
            margin: 0;
            /* 外边距为0 */
            /*background-color: #F5F5F5;  整个页面背景为淡灰色 */



        }

        .my-container {

            position: fixed;
            /*固定定位*/
            left: 0px;
            top: 0px;
            right: 0px;
            bottom: 0px;

            /*background-color: red;*/

        }

        .my-header {
            position: absolute;
            /*绝对定位，即相对于父元素的定位*/
            left: 0px;
            top: 0px;
            width: 100%;
            height: 30px;

            display: flex;
            /*定义本元素为flex容器*/

            /* 指定flex容器主轴排列方向（与其垂直的方向即为交叉轴）， flex容器内部元素的排列方向*/
            ;
            flex-direction: row;
            justify-content: flex-end;
            /*指定主轴的对齐方式*/
            align-items: center;
            /*指定交叉轴的对齐方式*/
            ;


            background-color: salmon;

            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;

        }

        .my-main {
            position: absolute;
            left: 0px;
            top: 0px;
            right: 0px;
            bottom: 40px;

            overflow: auto;

            background-image: url(resources/images/2.jpg);
            background-size: 100%;
        }

        .my-footer {

            position: absolute;
            /*绝对定位，即相对于父元素的定位*/
            left: 0px;
            bottom: 0px;
            width: 100%;
            height: 30px;

            display: flex;
            flex-direction: row;

            border-top: none;
            /*边框 粗细、线型、颜色 */

            background-color: salmon;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;

            /*内边距*/
        }

        .my-header-item {
            color: salmon;
            /*文字颜色*/
            /* margin: 0 5px 0 0;*/
            /* 上右下左四个外边距 */
            width: 100%;
            /*text-align: center;*/
            /*内部文本水平居中*/
            border-radius: 10px;
            /*设置边框圆角半径*/

        }

        .my-header-item:active {
            /*点击时的样式*/
            background-color: burlywood;
            background: transparent;
            color: salmon;
        }

        .my-plus {
            width: 30px;
            height: 30px;
            border-radius: 15px;
            position: absolute;
            top: -15px;
            left: 50%;
            margin-left: -15px;
        }

        .my-plus>img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }



        .my-footer-item {
            border-right: 1px solid #DDDDDD;
            height: 100%;
            color: salmon;
            /*font-size:20px;*/

            flex: 1 1 auto;
            /*设置在flex容器的元素上，用于设置自适应缩放*/

            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background: transparent;
            padding-top: 5px;
        }

        .my-home {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            flex-wrap: wrap;
            align-items: center;
            padding: 0 5px 0 5px;
        }

        .my-card {
            /*position: absolute;*/
            width: 45%;
            height: 100px;
            border: 1px solid #CCCCCC;
            border-radius: 10px;
            box-shadow: 0 0 5px 1px #CCCCCC;

            /*background-color: white;*/
            /*opacity: :0.8;*/
            background: transparent;
            margin: 5px 5px 5px 5px;

            flex: 1 1 auto;



        }
    </style>

</head>

<body>

    <div id="app" class="my-container">

        <!--  <div class="my-header">
            <div class="my-header-item">
                    <img src="resources/images/QQ图片20191108164922.png" style="width:100px;height:100px;">
            </div>

        </div> -->

        <div class="my-main">
            <img src="resources/images/QQ图片20191108164922.png" style="width:100%;height:30px;opacity: 0.5;">
            <div class="my-home" v-if="currVisible=='home'">
                <div v-for="info in list" class="my-card">{{info.id+':'+info.name}}</div>
            </div>
            <div class="my-mine" v-if="currVisible=='mine'">

            </div>
        </div>

        <div class="my-footer">

            <div class="my-footer-item" @click="currVisible='home'" style="opacity:0.8"
                :style="{backgroundColor:currVisible=='home'?'#F4A460':'white'}"><i class="fa fa-heartbeat fa-2x"></i>
            </div>
            <div class="my-footer-item" @click="currVisible='mine'" style="opacity:0.8"
                :style="{backgroundColor:currVisible=='mine'?'#F4A460':'white'}" style="border-right:none;"><i
                    class="fa fa-user-o fa-2x"></i></div>



            <div class="my-plus">
                <img src="resources/images/QQ图片20191108154453.png" @click="currVisible='my-plus'" style="opacity:0.6"
                    :style="{backgroundColor:currVisible=='my-plus'?'#F4A460':'white'}">

            </div>
        </div>

    </div>




</body>

<!-- 在body结尾之后引入以下js文件。 注意导入顺序不可以随意改变。 -->
<script src="resources/js/jquery-3.3.1.slim.min.js"></script>
<script src="resources/js/popper.min.js"></script>
<script src="resources/js/bootstrap.min.js"></script>
<script src="resources/js/vue.min.js"></script>
<script src="resources/layer_mobile/layer.js"></script>
<script src="resources/js/axios.min.js"></script>
<script src="resources/js/my-mobile.js"></script>

<script>
    /*
        vue是一个数据驱动式javascript框架：数据改变，界面即改变，需要改变界面，仅需改变数据。
    */



    var vm = new Vue({
        el: '#app',//指定渲染的元素
        data: {//定义数据
            list: [
                { id: 123, name: "信息1" },
                { id: 456, name: "信息2" },
                { id: 333, name: "信息3" },
                { id: 223, name: "信息4" },
                { id: 1223, name: "信息5" },
                { dariy: "lalala" }
            ],
            currVisible: 'home'


        },
        methods: {//定义方法
            show(selor) {
                document.querySelector('#home').style.backgroundColor = 'white';
                //document.querySelector('#search').style.backgroundColor='white';
                document.querySelector('#mine').style.backgroundColor = 'white';
                //在操作前全部恢复原状
                document.querySelector('#' + selor).style.backgroundColor = 'white';

                this.currVisible = selor;

                if (selor == 'home') {
                    //document.querySelector('.my-home').style
                    //document.querySelector('#home').style.backgroundColor='red';
                } else {
                    //document.querySelector('#mine').style.backgroundColor='red';
                }

            }
        },
        mounted() {//定义界面渲染完成后需要执行的代码
            //console.log(document.querySelector('#home'));
            //document.querySelector('#home').style.backgroundColor='#DDDDDD';
        }
    });



</script>


</html>